<template>
  <div style="display: flex;align-items: center;">
    <div
      style="width: 400px;height: 80vh;margin-left:30px ;box-shadow:2px 2px 10px #909090;display: flex;flex-direction: column;align-items: center;justify-content: center;">
      <h1>资产管理系统</h1>
      <!-- <div>一个系统罢了</div> -->
    </div>
    <div style="display: flex;flex: 1;margin-left: 30px;margin-top: 30px;">
      <div>
        <el-card shadow="always">
          <div id="assetNum" style="width: 400px; height:400px ;">
          </div>
        </el-card>

        <el-card shadow="always" style="margin-top: 30px;">
          <div id="assetDept" style="width: 400px; height:400px;">
          </div>
        </el-card>
      </div>

      <div style=" margin-left: 30px;">
        <el-card shadow="always">
          <div id="assetClass" style="width: 800px; height:400px;">
          </div>
        </el-card>
        <el-card shadow="always" style="margin-top: 30px;">
          <div id="assetArea" style="width: 800px; height:400px;">
          </div>
        </el-card>

      </div>

    </div>
  </div>
</template>


<script>
import { getListAssetNum } from "@/api/asset/asset";
import * as echarts from 'echarts';

export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.5",
      //总资产数
      allAsset: [],
      //在用资产数
      useAsset: [],
      //闲置资产数
      idleAsset: [],
      //报废资产数
      scrapAsset: [],
      //类型
      computer: [],
      monitor: [],
      imac: [],
      laptop: [],
      tablePC: [],
      phone: [],
      projector: [],
      TVScreen: [],
      graphicsCard: [],
      camera: [],
      freezer: [],
      microwaveOven: [],
      office: [],
      conditioner: [],
      printer: [],

      //区域
      scientificCenter: [],
      operatingCenter: [],
      financeCenter: [],
      administrationCenter: [],

      //部门
      reseaching: [],
      maintenancing: [],
      operating: [],
      marking: [],
      testing: [],
      administrating: [],
      financial: [],

    };
  },
  mounted() {
    // this.initCharts();
    this.getAssetNum();
    this.getAssetTypeNum();
    this.getAssetAreaNum();
    this.getAssetDepNum();
  },
  methods: {
    /** 获取资产数量信息 */
    getAssetNum() {
      getListAssetNum().then(response => {
        // let a = response.data;
        console.log(response);
        console.log(response.rows[0].allAsset);
        var allAsset = response.rows[0].allAsset;
        var useAsset = response.rows[0].useAsset;
        var idleAsset = response.rows[0].idleAsset;
        var scrapAsset = response.rows[0].scrapAsset;

        var chartDom = document.getElementById('assetNum');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          title: {
            text: '资产状态占比',
            // subtext: 'Fake Data',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            bottom: 10,
            left: 'center',
            data: ['在用资产', '闲置资产', '报废资产']
          },
          series: [
            {
              type: 'pie',
              radius: '65%',
              center: ['50%', '50%'],
              selectedMode: 'single',
              data: [
                { value: useAsset, name: '在用资产' },
                { value: idleAsset, name: '闲置资产' },
                { value: scrapAsset, name: '报废资产' },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        myChart.setOption(option);
        option && myChart.setOption(option);

      });
    },
    goTarget(href) {
      window.open(href, "_blank");
    },

    /** 获取资产类别信息 */
    getAssetTypeNum() {
      getListAssetNum().then(response => {
        var computer = response.rows[0].computer;
        var monitor = response.rows[0].monitor;
        var imac = response.rows[0].imac;
        var laptop = response.rows[0].laptop;
        var tablePC = response.rows[0].tablePC;
        var phone = response.rows[0].phone;
        var projector = response.rows[0].projector;
        var TVScreen = response.rows[0].TVScreen;
        var graphicsCard = response.rows[0].graphicsCard;
        var camera = response.rows[0].camera;
        var freezer = response.rows[0].freezer;
        var microwaveOven = response.rows[0].microwaveOven;
        var office = response.rows[0].office;
        var conditioner = response.rows[0].conditioner;
        var printer = response.rows[0].printer;

        var chartDom = document.getElementById('assetClass');
        var myChart1 = echarts.init(chartDom);
        var option;

        // prettier-ignore
        let dataAxis = ['电脑主机', '电脑显示屏', '苹果一体机', '笔记本电脑', '平板电脑', '手机', '投影仪', '电视机', '显卡', '摄影机', '冰箱', '微波炉', '办公家具', '空调', '打印机'];
        // prettier-ignore
        let data = [computer, monitor, imac, laptop, tablePC, phone, projector, TVScreen, graphicsCard, camera, freezer, microwaveOven, office, conditioner, printer];
        let yMax = 500;
        let dataShadow = [];
        for (let i = 0; i < data.length; i++) {
          dataShadow.push(yMax);
        }
        option = {
          title: {
            text: '资产分类统计',
            // subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          xAxis: {
            data: dataAxis,
            axisLabel: {
              inside: true,
              color: '#fff'
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            z: 10
          },
          yAxis: {
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#999'
            }
          },
          dataZoom: [
            {
              type: 'inside'
            }
          ],
          series: [
            {
              type: 'bar',
              showBackground: true,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#83bff6' },
                  { offset: 0.5, color: '#188df0' },
                  { offset: 1, color: '#188df0' }
                ])
              },
              emphasis: {
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#2378f7' },
                    { offset: 0.7, color: '#2378f7' },
                    { offset: 1, color: '#83bff6' }
                  ])
                }
              },
              data: data
            }
          ]
        };
        // Enable data zoom when user click bar.
        const zoomSize = 6;
        myChart1.on('click', function (params) {
          console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
          myChart1.dispatchAction({
            type: 'dataZoom',
            startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
            endValue:
              dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
          });
        });

        option && myChart1.setOption(option);

      });

    },
    /** 获取资产区域信息 */
    getAssetAreaNum() {
      getListAssetNum().then(response => {
        var scientificCenter = response.rows[0].scientificCenter;
        var operatingCenter = response.rows[0].operatingCenter;
        var financeCenter = response.rows[0].financeCenter;
        var administrationCenter = response.rows[0].administrationCenter;

        var chartDom = document.getElementById('assetArea');
        var myChart = echarts.init(chartDom);
        var option;


        option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          title: {
            text: '资产区域统计',
            // subtext: 'Fake Data',
            left: 'center'
          },
          xAxis: {
            type: 'category',
            data: ['科研中心', '运营中心', '财务中心', '行政中心']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [scientificCenter, operatingCenter, financeCenter, administrationCenter],
              type: 'bar',
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
              }
            }
          ]
        };

        option && myChart.setOption(option);


      });

    },
    /** 获取资部门别信息 */
    getAssetDepNum() {
      getListAssetNum().then(response => {
        var reseaching = response.rows[0].reseaching;
        var maintenancing = response.rows[0].maintenancing;
        var operating = response.rows[0].operating;
        var marking = response.rows[0].marking;
        var testing = response.rows[0].testing;
        var administrating = response.rows[0].administrating;
        var financial = response.rows[0].financial;

        var chartDom = document.getElementById('assetDept');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          title: {
            text: '部门使用占比',
            // subtext: 'Fake Data',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            bottom: 10,
            left: 'center',
            data: ['研发部门', '运维部门', '运营部门', '市场部门', '测试部门', '行政部门', '财务部门']
          },
          series: [
            {
              type: 'pie',
              radius: '65%',
              center: ['50%', '50%'],
              selectedMode: 'single',
              data: [
                { value: reseaching, name: '研发部门' },
                { value: maintenancing, name: '运维部门' },
                { value: operating, name: '运营部门' },
                { value: marking, name: '市场部门' },
                { value: testing, name: '测试部门' },
                { value: administrating, name: '行政部门' },
                { value: financial, name: '财务部门' },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        myChart.setOption(option);
        option && myChart.setOption(option);

      });

    }


  }
};
</script>



<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans",
  "Helvetica Neue",
  Helvetica,
  Arial,
  sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>

